<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微头条详情</title>
    <link rel="stylesheet" href="css/eui.css">
    <script src="js/vue/vue.js"></script>
    <script src="js/vue/axios.min.js"></script>
    <script src="js/vue/eui.js"></script>

    <style>
        #app {
            width: 600px;
            margin: 0 auto;
        }

        .comment img, .comment_content img {
            width: 40px;
            border-radius: 50%;
        }

        .comment_content_top {
            position: relative;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-card class="box-card">
            <p>邀你报名！头条学堂x长江商学院联合举办的「乡村商学堂」启动招生啦！ 🔥培训专门针对【乡村企业家】，提供高质量的理论及实操课程，配以落地的运营指导，帮助创业者开启企业的新征程，助力乡村企业快速发展！⏰3月15日-5月10日滚动录取，额满即止！💰通过初审及面试被录取的学员提供由头条学堂全额奖学金（学员仅需自费交通食宿费），点击海报报名&了解详情吧！#乡村商学堂#</p>
        </el-card>

        <div class="content">
            <img src="img/haha.png" alt="" width="100%">
        </div>

        <div class="comment">
            <h3>评论: 81</h3>
            <img src="img/zs.gif" alt="">
            <el-form>
                <el-form-item>
                    <el-input type="textarea" v-model="form.desc" placeholder="评论点什么...." rows="7"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addComment">评论</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="comment_content">
            <div class="comment_content_top">
                <img src="img/fd.gif" alt="" style="float: left">
                <span style="float: left">用户名</span>
                <button style="float: right">点赞</button>
                <span style="float: right">48</span>
            </div>
            <div class="comment_content_body">
                <el-card class="box-card">
                    哈哈哈
                </el-card>
            </div>
        </div>
    </div>
    <script>
        let v = new Vue({
            el: "#app",
            data() {
                return {
                    form: {
                        desc: ""
                    }
                }
            },
            methods: {
                addComment() {
                    // 当用户点击一条微动态进入微动态详情页面，会传过来对应这条微动态的id
                    axios.get("/wemedia/comment/micro/commentPlusOne/1").then(function (res) {

                    });
                }
            }
        });
    </script>
</body>
</html>